<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../Swiper-3.4.2/dist/css/swiper.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/commin.css">
    <link rel="stylesheet" href="../icon/iconfont.css">
</head>

<body>
    <div id="shopHeader">
        <!-- 头部 -->
        <header>
            <div class="shop" id="shop">
                <!-- <a><i class="iconfont icon-xiangzuojiantou"></i></a> -->
                <div class="page">
                    <h3>{{title}}</h3>
                </div>
            </div>
        </header>
        <!-- 主体 -->
        <div class="main-body">
            <!-- 搜索框 -->
            <a href="../商品搜索/index.html" @click.prevent>
                <div class="search">
                    <div class="inner"><span class="iconfont icon-sousuo"></span>
                        {{search}}
                    </div>
                </div>
            </a>
            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in banner">
                        <img :src="item.imgUrl" alt="">
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <!-- <div class="swiper-button-next"></div> -->
                <!-- <div class="swiper-button-prev"></div> -->
            </div>
            <!-- 公告 -->
            <div class="news">
                <i class="iconfont icon-laba"></i>
                <div class="right">
                    <p>{{news}}</p>
                </div>
            </div>
            <!-- 十个小列表 -->
            <div class="navs">
                <div v-for="(item,index) in navBar" :key="index">
                    <a href="#" @click.prevent>
                        <img :src="item.imgUrl" alt="">
                        <p>{{item.text}}</p>
                    </a>
                </div>
            </div>
            <!-- 大图链接 -->
            <a href="../全部分类/index.html" @click.prevent>
                <div class="picture">
                    <img :src="picture" alt="">

                </div>
            </a>
            <!-- 猜你喜欢 -->
            <div class="guess">
                <a href="#" @click.prevent>
                    <!-- <p>—— 猜你喜欢 ——</p> -->
                    <p v-html="guess"></p>
                </a>
            </div>
            <!-- 具体图片和介绍 -->
            <div class="main">
                <a href="#" @click.prevent>
                    <div class="box common" v-for="(item,index) in box" :key="item.goods_id">
                        <div class="left">
                            <img :src="item.goods_image" alt="">
                        </div>
                        <div class="right">
                            <div class="top ellipsis-2">{{item.goods_name}}</div>
                            <div class="buttom">
                                <span>已售{{item.goods_sales}}件</span>
                                <div class="footer">
                                    <em>￥{{item.goods_price_min}}</em><span
                                        v-if="item.line_price_min> 0 ">￥{{item.line_price_min}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>

            </div>
        </div>
        <!-- 底部 -->
        <footer>

            <a href="#" class="active" @click.prevent>
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
            <a href="./class.html">
                <i class="iconfont icon-fenlei"></i>
                <p>分类</p>
            </a>
            <a href="../购物车/index.html" @click.prevent>
                <i class="iconfont icon-gouwuchekong"></i>
                <p>购物车</p>
            </a>
            <a href="../我的/index.html" @click.prevent>
                <i class="iconfont icon-wode"></i>
                <p>我的</p>
            </a>
        </footer>

    </div>






    <script src="../Swiper-3.4.2/dist/js/swiper.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/commin.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/vue.js"></script>
    <script>
        // 接口调用基础地址：http://cba.itlike.com/public/index.php?s=/api/
        const shopHeader = new Vue({
            el: '#shopHeader',
            data: {
                list: [],
                title: '',
                search: '',
                news: '',
                picture: '',
                guess: '',
                navBar: [],
                box: [],
                banner: []


            },
            created() {
                this.shopping()

            },

            methods: {

                async shopping() {
                    const { data: data } = await axios.get('http://cba.itlike.com/public/index.php?s=/api//page/detail',)
                    const res = data.data.pageData
                    // console.log(data.data.pageData)
                    // console.log(res.items[3].data)
                    console.log(res.items[1].data)
                    // console.log(res.items[2].params.text)
                    // console.log(data.data.pageData.page.params.title)
                    // console.log(res.items[4].data[0].imgUrl)
                    // console.log(res.items[5].params)
                    // console.log(res.items[6].data)
                    // console.log(res)
                    this.title = res.page.params.title
                    this.search = res.items[0].params.placeholder

                    this.banner = res.items[1].data

                    var swiper = new Swiper('.swiper-container', {
                        pagination: {
                            el: '.swiper-pagination',
                        },
                        pagination:'.swiper-pagination',
                        observeParents: true,
                        observer: true,
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        paginationClickable: true,
                        spaceBetween: 30,
                        centeredSlides: true,
                        autoplay: 1500,
                        autoplayDisableOnInteraction: false
                    });
                    this.news = res.items[2].params.text
                    this.navBar = res.items[3].data
                    this.picture = res.items[4].data[0].imgUrl
                    this.guess = res.items[5].params.content
                    this.box = res.items[6].data


                }
            }

        })
    </script>

</body>

</html>